<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="button" value="点击" id="btn">
    <input type="button" value="无事件" id="btn2">
    <input type="button" value="多事件" id="btn3">
    <input type="button" value="阻止事件流" id="btn4">

    <a href="http://www.baidu.com" id="myLink">百度</a>

    <script>
        /**
         * 在DOM中发生事件时，所有相关信息会被收集在event对象中
         * */
        const btn = document.getElementById("btn")
        btn.onclick = function (event) {
            console.log(event.type) // click
        }
        btn.addEventListener("click", () => {
            console.log(event.type) // click
        }, false)

        // 事件对象中this、currentTarget、target的值
        // 如果事件添加到目标元素那么以上三个值相等
        // target只包含事件的实际目标，currentTarget当前事件处理程序所在的元素，this始终指向currentTarget
        // document.body.onclick = function(env) {
        //     console.log(env.currentTarget === document.body) // true
        //     console.log(env.currentTarget === this)
        //     console.log(env.target === document.getElementById("btn2")) // true
        // }

        // event.click中type属性的用法
        // 当一个事件处理程序处理多个事件的时候，很有用
        const btn3 = document.getElementById('btn3')
        const handler = function(evn) {
            switch(evn.type) {
                case 'click':
                    console.log("click")
                    break;
                case 'mouseover':
                    evn.target.style.backgroundColor = "#ccc"
                    break;
                case 'mouseout': 
                    evn.target.style.backgroundColor =""
            }
        }
        btn3.onclick = handler
        btn3.onmouseover = handler
        btn3.onmouseout = handler

        // preventDefault()方法用来阻止特定事件的默认动作
        // 比如阻止a标签点击默认跳转到指定连接
        const myLink = document.getElementById("myLink")
        myLink.onclick = function(event) {
            event.preventDefault();
            console.log("link") // link
        }

        // stopPropagation()阻止事件流
        const btn4 = document.getElementById("btn4")
        btn4.onclick = function(event) {
            console.log("btn4 click")
            event.stopPropagation(); // 阻止了事件流，body上的事件处理程序就不会触发
        }
        document.body.onclick = function(event) {
            console.log("body click")
        }

        

    </script>
</body>

</html>